<template>
  <el-dialog
      v-model="open"
      :title="title"
      width="1000px"
      height="500px"
      append-to-body
      :close-on-click-modal="false">

    <el-row :gutter="10" class="mb8">
      <el-col>
        <el-button type="primary" plain @click="addProject">添加住店日期</el-button>
      </el-col>
    </el-row>
    <el-table ref="dialogRef" :data = "form.trainHotelList"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" fixed="left" :selectable="selectable"/>
      <el-table-column label="酒店名称" prop="name" min-width="100"/>
      <el-table-column label="住店时间" prop="moveIntoTimeStr" min-width="100"></el-table-column>
      <el-table-column label="费用" min-width="80" prop="cost"></el-table-column>
      <el-table-column label="房间数" min-width="50" prop="rooms"></el-table-column>
      <el-table-column label="剩余房间数" min-width="50" prop="leftRooms"></el-table-column>
    </el-table>

  </el-dialog>

</template>

<script setup>
// export default {
//   name: "addHotel"
// }
import { getCurrentInstance, reactive } from '@vue/runtime-core'
import {addExpenses, enrollDelay} from '../../../../../api/train/verity'
import {ref, watch} from 'vue'
import { toRefs } from '@vueuse/shared'


const loading = ref(true)
import {useRouter} from 'vue-router'
import { useRoute } from 'vue-router'
const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()
const props = defineProps({
  props: {
    type: Object,
    default: () => ({
      open: false,
      title: "",
    }),
  },
});
const formBase = {};

const trainId = route.params.trainId
const userId = route.params.userId
// const {queryParams, form, rules} = toRefs(data)
let selectedIds = []
let expenseId = undefined;

const data = reactive({
  form: {
    ...formBase,
  },
  rules: {},
});

const { open, title } = toRefs(props.props);
const { form, rules } = toRefs(data);
watch(open, (val) => {
  if (val) {
    form.value = props.props.data || { ...formBase };
    expenseId = form.value.id
  } else {
    // proxy.resetForm("dialogRef");
    open.value = false
  }
});

function handleSelectionChange(selection) {
  selectedIds = selection.map(item => item.id)
}


function addProject(){
  let params={
    ids : selectedIds,
    userId: userId,
    trainId: trainId,
    flag:0,
    expenseId:expenseId
  }
  let title = ''
  if (0 == selectedIds.length){
    title = '是否不选择酒店？'
  }else {
    title = `是否选择添加 ${selectedIds.length}天的酒店信息？`
  }
  proxy.$modal.confirm(title).then(function (){
    return addExpenses(params)
  }).then((res) => {
    if (res.code == 200){
      proxy.$modal.msgSuccess("操作成功")
      open.value = false
    }else {
      proxy.$modal.msgError("操作失败")
    }
  })
}

function selectable(row){
  if (row.leftRooms <= 0){
    return false
  }else {
    return true
  }
}

</script>

<style scoped lang="scss">
.dpflex {
  display: flex;
span {
  margin: 0 15px;
}
}
</style>
